import React, { useState, useEffect } from 'react'
import { Card, Table, Space, Button, Select } from "antd"
import { Liquid } from '@ant-design/charts';
import style from "./style.module.css"
// import { getuserlist, getDel_yhw } from "@/api/request.js"
import { getPintuanData, delPintuanData, setPinTuanStart } from '@/api/request';
export default function List() {
  const [data, setData] = useState([])
  var config = {
    percent: 0.60,
    outline: {
      border: 5,
      distance: 8,
    },
    wave: { length: 128 },
  };
  var configs = {
    percent: 0.10,
    outline: {
      border: 5,
      distance: 8,
    },
    wave: { length: 128 },
  };
  //删除
  const del_yhw = (data) => {
    delPintuanData(data.id).then(res => {
      changedata(res.data.data)

    })
  }

  //下拉框
  const { Option } = Select;
  function handleChange(value) {
    console.log(value, 'value')
    getPintuanData({ state: value }).then(res => {
      changedata(res.data.data)
    })
  }
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      // render: text => <a>{text}</a>,
    },
    {
      title: '头像',
      dataIndex: 'image',
      key: 'image',
      render: aa => {
        return <img src={aa} alt="" />
      }
    },
    {
      title: '开团团长',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '拼团商品',
      key: 'title',
      dataIndex: 'title',
    },
    {
      title: '几人团',
      key: 'peopleNum',
      dataIndex: 'peopleNum',
    },
    {
      title: '几人参加',
      key: 'peopleNum',
      dataIndex: 'peopleNum',
    },
    {
      title: '结束时间',
      key: 'endTime',
      dataIndex: 'endTime',
    },
    {
      title: '拼团状态',
      key: 'state',
      dataIndex: 'state',
      render: (text) => (
        <span>
          {
            text ? <span className={style.wancehng}>已完成</span> : <span className={style.weiwanc}>未完成</span>
          }
        </span>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button type="primary" danger onClick={() => del_yhw(record)}>删除</Button>
        </Space>
      ),
    },
  ];
  const changedata = (data) => {
    setData(data)
  }
  //获取拼团数据
  useEffect(() => {
    getPintuanData().then(res => {
      console.log(res);
      changedata(res.data.data)
    })
  }, [])

  return (
    <div>
      <Card>
        <div className={style.List}>
          <div className={style.dl}>
            <Liquid {...config} style={{ width: 300, height: 130 }} />
            <div>
              <dl>
                <dt></dt>
                <dd>
                  <p className={style.p}><b>6</b></p>
                  <p className={style.ps}>参加人数</p>
                </dd>
              </dl>
            </div>
          </div>
          <div className={style.dls}>
            <Liquid {...configs} style={{ width: 200, height: 130, color: "red" }} />
            <div>
              <dl>
                <dt></dt>
                <dd>
                  <p className={style.p}><b>6</b></p>
                  <p className={style.ps}>参加人数</p>
                </dd>
              </dl>
            </div>
          </div>
        </div>
      </Card>
      <Card>
        <div>
          <div>
            拼团状态： <Select defaultValue="请选择" style={{ width: 200 }} onChange={handleChange}>
              <Option value="1">已完成</Option>
              <Option value="0">未完成</Option>
            </Select>
          </div>
        </div>
        <div>
          <Table columns={columns} rowKey="id" dataSource={data} className={style.Table} />
        </div>
      </Card>
    </div>
  )
}